import * as React from 'react';
import { observer } from 'mobx-react';
import { Input, Button, Radio, Form, message } from 'antd';
import { AccountModel } from '../../../model/setting/account/AccountModel';
import { currUser } from "../../../model/CurrUserModel";

const RadioGroup = Radio.Group;
const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
};
const tailFormItemLayout = {
    wrapperCol: {
        span: 14,
        offset: 6,
    },
};

@observer
export class AccountEditor extends React.Component<any, { store: AccountModel }> {

    constructor(props) {
        super(props);
        this.initState();
    }

    initState() {
        let store: AccountModel = new AccountModel(this.props.params.id || 1);
        let promise = this.props.params.id != null ? store.fetchData() : store.fetchMyAccountData();

        promise.catch(res => {
            console.log(res);
            message.error(`数据请求失败`, 2.5);
        });

        this.state = {
            store,
        };
    }

    onSubmit = () => {
        this.state.store.updateAccount().then(res => {
            message.success(res.message, 2.5);
        }, res => {
            message.error(res.message, 2.5);
        });
    }

    render() {
        var { store } = this.state;

        return <Form horizontal>
            <Form.Item
                {...formItemLayout}
                label="帐号类型"
            >
                <span>{store.data.superAdmin ? "平台" : `媒体（${store.data.meiti.name}）`}</span>
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="帐号ID"
            >
                <span>{store.data.id}</span>
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="帐号名"
            >
                <span>{store.data.login}</span>
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="备注信息"
                validateStatus={store.noteValid ? 'success' : 'error'}
            >
                <Input placeholder="请输入店铺/品牌名称" value={store.data.note} onChange={e => store.data.note = e.target["value"]} />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="联系方式"
                validateStatus={store.contactInfoValid ? 'success' : 'error'}
            >
                <Input placeholder="请输入联系方式" value={store.data.contactInfo} onChange={e => store.data.contactInfo = e.target["value"]} />
            </Form.Item>
            {/*<Form.Item
                {...formItemLayout}
                label="原密码"
                validateStatus={store.passwordValid ? 'success' : 'error'}
            >
                <Input type="password" placeholder="请输入原密码" value={store.data.password} onChange={e => store.data.password = e.target["value"]} />
            </Form.Item>*/}
            <Form.Item
                {...formItemLayout}
                label="新密码"
                validateStatus={store.newPasswordValid ? 'success' : 'error'}
            >
                <Input type="password" placeholder="请输入新密码" value={store.newPassword} onChange={e => store.newPassword = e.target["value"]} />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="确认密码"
                validateStatus={store.newPasswordConfirmValid ? 'success' : 'error'}
            >
                <Input type="password" placeholder="请两次输入新密码" value={store.newPasswordConfirm} onChange={e => store.newPasswordConfirm = e.target["value"]} />
            </Form.Item>
            <Form.Item {...tailFormItemLayout}>
                <Button type="primary" size="large" onClick={this.onSubmit} style={{ marginRight: 10 }}>保存</Button>
                <Button size="large" onClick={() => location.href = '#/setting/account/manager'}>返回列表</Button>
            </Form.Item>
        </Form>
    }
}